<template>
  <teleport-modal
    @toggle="getInfo"
    ref="root"
    title="自定义标题"
    :width="400"
  >
    <template #title>
      <AppleFilled style="color: #03a9f4; font-size: 16px;"/>
      <strong>带图标的标题</strong>
    </template>
    <p style="color: #3d85f1; font-weight: bold;">teleport 测试，查看控制台，弹框在 body 中</p>
    <p style="color: #3d85f1; font-weight: bold;">teleport 测试，查看控制台，弹框在 body 中</p>
    <p style="color: #3d85f1; font-weight: bold;">teleport 测试，查看控制台，弹框在 body 中</p>
  </teleport-modal>
  <br>
  <br>
  <a-button @click="root.show()">通过 ref 从父组件调用子组件方法</a-button>
</template>

<script>
import TeleportModal from '@/components/TeleportModal'
import { AppleFilled } from '@ant-design/icons-vue'
import { ref, onMounted } from 'vue'

export default {
  name: 'TeleportDemo',
  components: {
    TeleportModal,
    AppleFilled
  },
  setup () {
    const root = ref(null)
    // 获取子组件传来的参数
    const getInfo = val => {
      console.log(`模态框的状态：${val}`)
    }

    onMounted(() => {
      // console.log(`root：${root.value}`)  // 这种方式写会报错
      console.log('root：', root.value)
    })

    return {
      getInfo,
      root
    }
  }
}
</script>

<style scoped>

</style>
